<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">
            <f:view>
                <h:form>
                    <p:panel id="pnlBusqueda" header="Consultar Cuentas" style="width:650px;margin: 5px auto" 
                             toggleable="true" widgetVar="buscar" collapsed="#{BKDocumentoSerieReporte.listaDocumentos ne null}" >
                        <p:panelGrid>
                            <p:row >
                                <p:column>
                                    <h:outputText value="SERIE: " class="lblBusqueda"  />
                                </p:column>
                                <p:column colspan="3">
                                    <p:selectOneMenu id="cbxBanco" value="#{BKDocumentoSerieReporte.serie}" style="width: 180px">
                                        <f:selectItem itemLabel="Seleccionar" itemValue="" /> 
                                        <f:selectItems value="#{BKDocumentoSerieReporte.listaSeries}" 
                                                       var="ser" itemLabel="#{ser}"
                                                       itemValue="#{ser}" />	
                                    </p:selectOneMenu>
                                </p:column>
                            </p:row>
                            
                            <p:row>
                                <p:column>
                                    <h:outputLabel id="lblFechaInicio" value="DEL: " class="lblBusqueda"/>
                                </p:column>
                                <p:column>
                                    <p:calendar id="txtFechaInicio" locale="es" size="19"
                                                value="#{BKDocumentoSerieReporte.fechaInicio}" 
                                                pattern="dd/MM/yyyy" 
                                                maxdate="#{BKDocumentoSerieReporte.fechaFinal}"
                                                showOn="button" showButtonPanel="true" navigator="true" >
                                        <p:ajax event="dateSelect" process="@this" update="txtFechaFinal" />
                                    </p:calendar>
                                </p:column>
                                <p:column>
                                    <h:outputLabel id="lblFechaFinal" value="AL: " class="lblBusqueda"/>
                                </p:column>
                                <p:column>
                                    <p:calendar id="txtFechaFinal" locale="es" size="19"
                                                value="#{BKDocumentoSerieReporte.fechaFinal}" 
                                                pattern="dd/MM/yyyy"
                                                mindate="#{BKDocumentoSerieReporte.fechaInicio}"
                                                showOn="button" showButtonPanel="true" navigator="true" >
                                        <p:ajax event="dateSelect" process="@this" update="txtFechaInicio"/>
                                    </p:calendar>
                                </p:column> 
                            </p:row>  
                            
                            <p:row>
                                <p:column>
                                    <p:commandButton id="btnBuscarCuenta" value="BUSCAR" actionListener="#{MBDocumentoSerieReporte.buscarGuias}" ajax="true" 
                                                     update="pnlBusqueda,dataTabla" styleClass="ui-priority-primary" 
                                                     oncomplete="listaCuentas.show();buscar.toggle()" style="font-size: 12px"/>
                                </p:column>
                            </p:row>
                        </p:panelGrid>

                    </p:panel>

                    <p:panel id="pnlListaCuentas" header="Lista de Cuentas Bancarias de la Empresa" closable="true" style="width: 100%;margin: 10px auto" 
                             visible="#{BKDocumentoSerieReporte.listaDocumentos eq null?false:true }" widgetVar="listaCuentas" >

                        <p:dataTable id="dataTabla" var="doc" value="#{BKDocumentoSerieReporte.listaDocumentos}" widgetVar="carsTable"
                                     emptyMessage="No se encontraron cuentas bancarias" filteredValue="" rowIndexVar="rowIndex"
                                     paginator="true" rows="40" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="40,100,200"
                                     paginatorPosition="bottom" styleClass="datable-busqueda"> 

                            <f:facet name="header" >
                                <p:outputPanel layout="block" >
                                    <h:commandButton value="Exportar EXCEL">  
                                        <p:dataExporter type="xls" target="dataTabla" fileName="correlativos" postProcessor="#{MBDocumentoSerieReporte.postProcessXLS}" />  
                                    </h:commandButton>  

                                    <h:commandButton value="Exportar PDF">  
                                        <p:dataExporter type="pdf" target="dataTabla" fileName="correlativos"/>  
                                    </h:commandButton>
                                </p:outputPanel>

                            </f:facet>

                            <p:column sortBy="#{doc.fecha}" style="width: 10%"> 
                                <f:facet name="header">  
                                    <h:outputText value="FECHA" />  
                                </f:facet>
                                <h:outputText value="#{doc.fecha}" > 
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>
                            </p:column>

                            <p:column sortBy="#{doc.serie}" style="width: 10%"> 
                                <f:facet name="header">  
                                    <h:outputText value="SERIE" />  
                                </f:facet>
                                <h:outputText value="#{doc.serie}" /> 
                            </p:column>

                            <p:column sortBy="#{doc.numero}" style="width: 10%"> 
                                <f:facet name="header">  
                                    <h:outputText value="NUMERO" />  
                                </f:facet>
                                <h:outputText value="#{doc.numero}" /> 
                            </p:column>

                            <p:column sortBy="#{doc.remitido}" style="width: 40%"> 
                                <f:facet name="header">  
                                    <h:outputText value="REMITIDO A" />  
                                </f:facet>
                                <h:outputText value="#{doc.remitido}" > 
                                </h:outputText>
                            </p:column>

                            <p:column sortBy="#{doc.codigoOP}" style="width: 15%"> 
                                <f:facet name="header">  
                                    <h:outputText value="OP" />
                                </f:facet>
                                <h:outputText value="#{doc.codigoOP}" > 
                                </h:outputText>  
                            </p:column>

                        </p:dataTable>	
                    </p:panel>

                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>

</html>